<template>
	<view class="doctorList">
		<view class="doctorList_head">
			<text></text>{{deptName}}
			<text></text>
		</view>
        <view class="noData" v-if="doctorList.length == 0 && dataShow ==true" >
            <image  mode='aspectFill' src="../../../static/images/noData.png" class="noData-pic"></image>
            <view>当前科室无可咨询的医生</view>
        </view>
		<view wx:else>
			<view class="doctorList_cnt" >
				<view class="li flexbox" v-for="item in doctorList" :key="item.doctorId" @click.native="goHistoryDetails(item)">
					<view class="flexbox_fl">
						<image class="li_img" :src="item.headPic"  mode="aspectFit"></image>
						<view class="text">
							<view class="name">
								<text>{{item.doctorName}}</text>{{item.doctorTitles}}</view>
							<view class="text-ellipsis">{{item.content}}</view>
						</view>
					</view>
					<view class="flexbox_fr" v-if="item.state == 0">暂停咨询</view>
                    <view class="flexbox_fr red" v-else><text class="iconfont icon-xinxi"></text>{{item.price}}元</view>

				</view>
			</view>
		</view>
	</view>

<!-- headPic	医生头像
doctorTitles	职称
content	医生介绍
price	医生咨询价格
state	0 暂停咨询  1有效 -->
</template>

<script>
    import _ from '@/common/util/underscore.js'
    import API from '@/utils/api.js'
	export default {
		data() {
			return {
				deptName:'',//科室的名称
				dataShow:false,//是否请求完
				doctorList:[]//医生列表
			}
		},
		components:{
		},
		onLoad(option) {
			this.deptName = option.deptName;
			this.getDoctorListFn(option);		
		},
		methods: {
			getDoctorListFn:function(param){
				let params ={
                    hospitalId:uni.getStorageSync("hospitalId"),
                    deptId: param.deptId || "1"
                }
                this.showLoading =false,//是否请求完
                this.dataShow = false;
                uni.showLoading({
                    title: '加载中',
                });
                API.queryDoctors(params).then(res => {
                    uni.hideLoading();
                    if(res.success == true){
                        let entity = res.entity;
                        if (entity.length >0){
                            entity =_.map(entity, function (el) {
                                    el.doctorName = el.doctorName == null ? "" : el.doctorName;
                                    el.remarks = el.remarks == null ? "" : el.remarks;
                                    el.titles = el.titles == null ? "" : el.titles;
                                    if (el.headPic == '' || el.headPic == null) {
                                        el.headPic = 'https://ylz-wlzs-test.obs.cn-north-1.myhuaweicloud.com:443/1578537072939';
                                    }
                                    return el;
                            });
                            
                        }
                        this.dataShow = true,//是否请求完
                        this.doctorList = entity;
                    }
                })
				
			},
			//医生跳转到病史详情
			goHistoryDetails(data){
				if (data.state == 0) {
					uni.showModal({
						content: '抱歉，该医生已暂停咨询，您可选择其他医生',
						showCancel:false,
						confirmText:"我知道了"
					})
				} else {
					uni.navigateTo({
                        url: '../historyDetails/index?doctorId=' + data.doctorId + "&doctorName=" + data.doctorName + "&deptId=" + data.deptId + "&deptName=" + this.deptName + "&titles=" + data.titles + "&price=" + data.price + "&headPic=" + data.headPic
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	page,.body,html{
	    background: #fff;
	}
	.doctorList{
		.flexbox{
			display: flex;
		}
		.flexbox_fl{
			flex: 1 1;
		}
		.flexbox_fr{
			width: 100rpx;
			text-align: right;
		}
	} 
	.doctorList_head{
		background-color: #edf5ff;
		color: #499dff;
		font-size: 34rpx;
		text-align: center;
		line-height: 112rpx;
		text{
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			display: inline-block;
			margin: 7rpx 20rpx;
			background-color: #499dff;
		}
	}
	.doctorList_cnt{
		padding: 0 32rpx;
		.li{
			padding: 24rpx 0rpx 35rpx;
			color: #999999;
			position: relative;
			font-size: 24rpx;
			border-bottom: 1rpx solid #d1d1d5;
			display: flex;
			.li_img{
				width: 96rpx;
				height: 96rpx;
				margin-right:40rpx;
				border-radius: 50%;
			}
		}
		.li .text{
			display: inline-block;
			position: absolute;
			top:24rpx;
			left:136rpx;
			width: calc(100% - 136rpx);
		}
		.name{
			margin-bottom: 15rpx;
			text{
				color: #030303;
				font-size: 34rpx;
				font-weight: 600;
				margin-right: 16rpx;
			}
		}
        .flexbox_fr.red{
            color: #499dff;
            position: relative;
            .icon-xinxi{
                position: absolute;
                top:0;
                left:25rpx;
                color: #499dff;
                font-size: 30rpx;
            }
        }
	}
</style>
